<template>
	<view class="moto-page">
		<van-nav-bar title="选车" />
		<van-search v-model="inp" shape="round" placeholder="请输入搜索关键词" @search="onSearch" :clearable='false' />
		<view class="moto-wrap">
			<van-index-bar :index-list="rankList">
				<van-index-anchor index="荐">最新推荐</van-index-anchor>
				<view class="select_jian">
					<view v-for="v in select_jian" @click="motoSelect(v.id,'brand')">
						<img :src="v.photo">
						<van-cell :title="v.carBrandName" />
					</view>
				</view>
				<van-index-anchor index="热">热门车型</van-index-anchor>
				<view class="select_hot">
					<view v-for="v in select_hot" @click="motoSelect(v.carName,'moto')">
						<img :src="v.photo">
						<van-text-ellipsis :content="v.carName" />
					</view>
				</view>
				<view v-for="v in motoList" v-show="v.show">
					<van-index-anchor style="background-color: #F8F9FB;" :index="v.index">{{v.index}}</van-index-anchor>
					<view class="select-ranking-item" v-for="v in v.brands" @click="motoSelect(v.id,'brand')">
						<img :src="v.photo" alt="">
						<van-cell :title="v.carBrandName" />
					</view>
				</view>
			</van-index-bar>
		</view>
	</view>

</template>

<script setup>
	import {
		ref
	} from 'vue'
	import {
		onLoad
	} from '@dcloudio/uni-app'
	import $api from '../../request/index.js'


	//  推荐列表
	let select_jian = []
	// 热门列表
	let select_hot = []

	// 查找索引
	let rankList = ['荐', '热', 'A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N', 'O', 'P', 'Q',
		'R', 'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z'
	]
	// 摩托品牌列表
	let motoList = []

	// 初始化摩托列表
	for (let i = 2; i < rankList.length; i++) {
		motoList.push({
			index: rankList[i],
			brands: []
		})
	}

	// 查找关键词
	let inp = ref('')
	// 搜索框根据摩托名字进行搜索
	const onSearch = e => motoSelect(e, 'moto')

	// 查找摩托
	const motoSelect = (e, type) => {
		let url = type == 'moto' ? '/pages/select_moto/select_moto' : '/pages/select_brand/select_brand'
		uni.navigateTo({
			url: url + '? type=' + e
		})
	}

	onLoad(() => {
		// 获得热门数据 
		$api.get('/moto/car/orderMarkCar').then(res => select_hot = res.data.slice(0, 6))
		// 获得排行榜数据
		$api.get('/moto/car/AsciiFindAllCarBrand').then(res => {
			// 获得推荐列表
			select_jian = res.data.slice(0, 5)

			// 通过遍历 整理摩托排行白的数据
			motoList.forEach(item => {
				res.data.forEach(el => {
					if (item.index == el.init) {
						item.brands.push(el)
					}
				})
				// 如果首字母下面 没有摩托 就不显示了
				item.show = item.brands.length < 1 ? false : true
			})
		})
	})
</script>

<style>
	.moto-wrap {
		height: calc(100vh - 150px);
		overflow-y: scroll;
	}


	/* 推荐 */
	.select_jian {
		display: flex;
		justify-content: space-evenly;
		flex-wrap: wrap;
	}

	.select_hot {
		display: flex;
		flex-wrap: wrap;
		justify-content: space-evenly;
	}

	.select_jian>view,
	.select_hot>view {
		display: flex;
		flex-direction: column;
	}

	.select_hot>view {
		width: 100px;
		height: 100px;
	}



	.select_jian img {
		width: 100rpx;
	}

	.select_hot img {
		width: 100%;
		height: 75px;
	}

	.select_hot .van-text-ellipsis {
		width: 100%;
		text-align: center;
	}

	.van-cell {
		margin: 0;
		padding: 0;
		text-align: center;
	}

	.select-ranking-item {
		padding: 20rpx;
		display: flex;
		align-items: center;
		justify-content: flex-start;
		height: 100rpx;
		overflow: hidden;
	}

	.van-cell__title {
		width: 100px;
	}

	.select-ranking-item img {
		width: 200rpx;
	}

	.select-ranking-item>.van-cell {
		width: 120px;
		font-size: 16px;
	}
</style>